<template>
    <div>
        <BreadCrumb></BreadCrumb>
        <!-- 查询区域 -->
        <div class="head">
            <el-form :inline="true" :model="formQuery" class="demo-form-inline" size="mini">
                <el-form-item label="产品名称">
                    <el-input v-model="formQuery.goodsname" placeholder="请输入" @blur="prodNameChange"></el-input>
                </el-form-item>
                <el-form-item label="添加时间">
                    <el-date-picker v-model="formQuery.addtime" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="warning" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="btn-box">
                <el-button type="warning" icon="el-icon-plus" size="small" @click="addProd">添加商品</el-button>
                <el-button @click="deltClick" type="danger" icon="el-icon-delete" size="small"
                    :disabled="deletDisable">批量删除</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @select="handleSelectionChange" @select-all="handleSelectionChange" :border="true"
                header-cell-class-name="active-head" cell-class-name="row-style">
                <el-table-column type="index" width="50" />
                <el-table-column type="selection" width="55" />
                <el-table-column prop="goodscode" label="商品编号" width="120" />
                <el-table-column label="商品名称" width="120">
                    <template slot-scope="{ row }">
                        <a @click="details(row)" class="gd-name">{{ row.goodsname }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="goodsprice" label="商品价格" width="120" />
                <el-table-column prop="goodscategory" label="商品类目" width="120" />
                <el-table-column label="添加时间" width="180">
                    <!-- 方式1：使用过滤器   <template slot-scope="scope">{{ scope.row.addtime | timeSty }}</template>  -->
                    <!-- 方式2：dayjs必须要在 methods 注册才能使用  -->
                    <template slot-scope="{row}">{{ dayjs(row.addtime).format('YYYY-MM-DD') }}</template>
                </el-table-column>
                <el-table-column prop="buypoint" label="商品卖点" width="120" />
                <el-table-column label="商品描述" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <!-- 好用，但不建议使用，比较危险。用util中自定义公共方法，手动去除包含的标签 -->
                        <!-- <span v-html="row.goodsdiscrip"></span> -->
                        <span>{{ removeHtmlTag(row.goodsdiscrip) }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="190">
                    <template slot-scope="scope">
                        <el-button @click="editClick(scope.row)" size="small" icon="el-icon-edit"
                            type="primary">编辑</el-button>
                        <el-button @click="deltClick(scope.row)" size="small" icon="el-icon-delete"
                            type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginat">
                <Pagination :total="total" :page-size="pageSize" @handleCurrentChange="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script>
import dayjs from 'dayjs';
import { removeHtmlTag } from '@/utils/index'
import Pagination from '@/components/pagination/pagination.vue';
import { getList, deletList } from '@/api/request/product/index'
import { mapMutations } from 'vuex';
export default {
    name: 'list-page',
    components: {
        Pagination
    },
    data() {
        return {
            params: {
                pagesize: 10,
                pagenumb: 1,
            },
            formQuery: {
                goodsname: '',
                addtime: ''
            },
            listData: {},
            tableData: [],
            moreChoose: [],
            total: 1,
            pageSize: 0,
            deletDisable: true,
            curentPage: 1,
        }
    },
    created() {
        this.query()
    },
    watch: {
        moreChoose(newval) {   // 如果多选了，批量删除 按钮取消禁用
            this.deletDisable = newval.length > 0 ? false : true
        }
    },
    methods: {
        // 导入的方法，必须这里声明后，才能在结构中使用
        dayjs,
        removeHtmlTag,
        ...mapMutations('prodList',['changeRowData','changeTitle']),
        // 查询表格数据
        async query(page) {
            this.params.pagenumb = typeof page == 'number' ? page : 1 
            let res = await getList('/portList', { ...this.formQuery, ...this.params })
            if (res.code != 200) {
                return this.$message.error(res.message)
            }
            console.log('chaxun', res);
            this.tableData = res.datas
            this.total = Number(res.total)
            this.pageSize = Number(res.pagesize)
        },
        // 重置
        reset() {
            this.formQuery = {
                goodsname: '',
                addtime: ''
            }
            // window.location.reload()  也可以刷新页面
            this.query()
        },
        // 列表多选框勾选触发-收集所有被勾选的行数据 ( 建议使用 select + select-all 的方法 )
        handleSelectionChange(items) {
            console.log(items);
            this.moreChoose = items
        },
        // 增加商品
        addProd() {
            this.$router.push('/product/list/product-page')
            this.changeTitle('添加')   // 给 vuex 传一个标识
        },
        // 编辑
        editClick(row) {
            console.log('row666',row);
            this.$router.push('/product/list/product-page')
            this.changeTitle('编辑')   // 给 vuex 传一个标识
            this.changeRowData(row)   // 给 vuex 传一行数据
        },
        // 单个删除 / 批量删除
        deltClick(row) {
            let ids = []
            ids = row.id ? [row.id] : this.moreChoose.map(item => item.id)
            ids = ids.toString()            // 解决bug ：mock 不接受数组类型的值，故转成字符串传递。
            console.log('ids', ids);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 调用删除接口
                this.delctList(ids)
            }).catch(() => {
                this.$message.info('已取消删除')
            });
        },
        // 调用删除接口
        async delctList(ids) {
            let res = await deletList('/delets', { ids })
            if (res.code == 200) {
                this.$message.success('删除成功!')
                // bug:当删除最后一页的最后一条数据时，会仍然按最后的页码请求数据，展示为空。
                // 解决bug: 根据返回的 总数 和 pageSize 余数，如果等于 1 ，则说明当前删除的这项是最后一条数据。需要传入 -1 的页码值。
                if (this.total % this.pageSize == 1) {
                    this.curentPage = Number(this.curentPage) - 1 > 0 ? Number(this.curentPage) - 1 : 1
                }
                this.query(this.curentPage) //刷新页面
            } else {
                this.$message.error('删除失败!')
            }
        },
        // 详情
        details(row) {
            this.$router.push('/product/list/product-page')
            this.changeTitle('详情')   // 给 vuex 传一个标识
            this.changeRowData(row)   // 给 vuex 传一行数据
        },
        // 分页切换页数
        handleCurrentChange(page) {
            this.curentPage = page
            this.query(page)
        },
        // 输入框内容变化
        prodNameChange() {
            // bug : 当分页器的数字不是1时，搜索查询会有问题。---解决思路： 输入框获取焦点时，请求参数初始化
            this.params.pagenumb = 1
        },
    },
    // 过滤时间格式
    filters: {
        timeSty(val) {
            if (!val) return
            return dayjs(val).format('YYYY-MM-DD')
        }
    },
}
</script>
<style scoped lang="less">
.content {
    background-color: #fff;

    /deep/ .active-head {
        color: #333;
        text-align: center;
    }

    /deep/ .row-style {
        text-align: center;
    }

    .gd-name {
        cursor: pointer;
        color: #1E90FF;
    }
}
</style>